<template>
	<view id="reviewCert" >
		<Header txt="证件审核认证" v-if="baidu"></Header>
		<HeaderB txt="证件审核认证" v-if="!baidu"></HeaderB>
		<view class="warring_txt">
			注：温馨提示：请确保您的实名信息的真是有效，熊猫代理有权自行或委托第三方，审查信息的真实有效。
		</view>
		<view class="warring_txt" v-if="isWx==false">
			微信暂不支持
		</view>
		<view class="content" v-if="isWx==true">
			<text>姓名</text><br>
			<input class="input" type="text" v-model="ruleForm.certName" placeholder="请输入姓名" />
			<text>身份证号</text>
			<input class="input" type="text" v-model="ruleForm.certNo" placeholder="请输入身份证号" />
			<text>上传身份证照片</text>
			<view class="fontT">
				<view class="font">
					1.格式要求jpg、jpeg、png，不超过5MB
				</view>
				<view class="font">
					2.可以添加“熊猫代理备案”等水印，但不能遮挡关键的信息，如：姓名、身份证号
				</view>
			</view>
			<view class="clearfix">
				<view class="fillInformation_float">
					<view class="close"  v-if="isShow1" @click="close(1)">
						x
					</view>
					<image class="img" :src="img1" mode="aspectFit" v-if="isShow1"></image>
					<view class="fillInformation_img" @click="select(1)">						
					</view>
					<view class="">
						身份证人像面
					</view>
				</view>
				<view class="fillInformation_float fillInformation_float2">
					<view class="close"  v-if="isShow2" @click="close(2)">
						x
					</view>
					<image class="img" :src="img2" mode="aspectFit" v-if="isShow2"></image>
					<view class="fillInformation_img" @click="select(2)">					
					</view>
					<view class="">
						身份证国徽面
					</view>
				</view>
			</view>
			<text>上传手持身份证人面像照片</text> <br>
			<view class="cover">
				<text>注意事项</text>
			</view>
			<view class="fontT">			
				<view class="font">
					1.在光线充足的地方进行拍照，但避免光线直射，防止拍照时身份证反光,确保身份证轮廓和所有信息清晰可见
				</view>
				<view class="font">
					2.拍摄时必须保证脸不被遮挡，五官清晰可见，需面对镜头完整露出持身份证的手臂，不建议化妆
				</view>
				<view class="font">
					3. 不能对照片做任何形式上的修改或处理，必须上传原始照片
				</view>
			</view>
			<view class="clearfix">
				<view class="fillInformation_float">					
					<image class="img" src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E7%94%A8%E6%88%B7/%E8%AE%A4%E8%AF%8113.png" mode="aspectFit" ></image>
					<view class="fillInformation_img" >						
					</view>
					<view class="">
						身份证国徽面
					</view>
				</view>
				<view class="fillInformation_float fillInformation_float2">
					<view class="close"  v-if="isShow3" @click="close(3)">
						x
					</view>
					<image class="img" :src="img3" mode="aspectFit" v-if="isShow3"></image>
					<view class="fillInformation_img" @click="select(3)">					
					</view>
					<view class="">
						手持身份证人面像
					</view>
				</view>
			</view>
			<view>
				<text>上传运营商截图</text>
				<text class="audio">联通个人信息图样></text>
			</view>
			<view class="cover">
				<text>注意事项</text>
			</view>
			<view class="fontT">			
				<view class="font">
					1.请您登录移动/联通/电信掌厅或网厅后，打开个人信息进行截图保存然后上传，以使我们验证信息的真实有效
				</view>
				<view class="font">
					ps:仅支持办理超过一个月的手机号
				</view>
			</view>
			<view class="clearfix">
				<!-- <image src="../../static/usercenter/11.png" mode=""></image> -->
				<view class="fillInformation_float">
					<image class="img" src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E7%94%A8%E6%88%B7/%E8%AE%A4%E8%AF%8114.png" mode="aspectFit" ></image>
					<view class="fillInformation_img" >						
					</view>
					<view class="">
						身份证国徽面
					</view>
				</view>
				<view class="fillInformation_float fillInformation_float2">
					<view class="close"  v-if="isShow4" @click="close(4)">
						x
					</view>
					<image class="img" :src="img4" mode="" v-if="isShow4"></image>
					<view class="fillInformation_img" @click="select(4)">					
					</view>
					<view class="">
						运营商截图
					</view>
				</view>
			</view>
		</view>
		<view class="btn" v-if="isWx==true">
			<button type="primary" @click="submitForm" v-if="certThree.status != 0">下一步 人工审核</button>
			<button type="primary" @click="submitForm" v-if="certThree.status == 0">重新认证</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgData:'',
				isShow1:false,
				isShow2:false,
				isShow3:false,
				isShow4:false,
				baidu:true,
				isWx:true,
				img1:'',
				img2:'',
				img3:'',
				img4:'',
				certThree: {
				        status: "",
				      },
				ruleForm: {
				        certName: "",
				        certNo: "",
				        frontCert: "",
				        backCert: "",
				        handCert: "",
				        operatorsCert: "",
				        certNo2:'2'
				},
				      optionsList: [],
				      header: { "Content-Type": "multipart/form-data" },
				      fileList: [],
				      user: {
				        userName: "",
				      },
				      certThree: {
				        status: "",
				      },
				      rules: {
				        certNo: [
				          { required: true, message: "请输入身份证号码", trigger: "blur" },
				          {
				            pattern: /^(\d{15}$|^\d{17}(\d|X|x))$/,
				            message: "请输入正确的身份证",
				            trigger: "blur",
				          },
				        ],
				        certName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
				        certNo2: [{ required: true, message: "", trigger: "blur" }],
				      },
				    
			}
		},
		onShow(){
			this.getPersonalCertify()
			// #ifdef MP-WEIXIN
			this.isWx=false
			// #endif
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
		},
		methods: {
			getPersonalCertify(){
				this.$store
				  .dispatch({
					  type:"GetPersonalCertify",
					  })
				  .then((response) => {
						let data = response.data;
				          if (data.code == "0") {
				            if (
				              typeof data.obj == "null" ||
				              typeof data.obj == "undefined" ||
				              typeof data.obj.status == "undefined"
				            ) {
				              console.log("未实名认证");
				              that.certThree.status = 3;
				            } else {
				              that.certThree.status = data.obj.status;
				            }
				          }	  
				  })
				  .catch(() => {});
			},
			submitForm(){
				let that=this
				this.$store
				  .dispatch({
					  type:"ArtificialCertify",
					  certName: that.ruleForm.certName,
					  certNo: that.ruleForm.certNo,
					  frontCert: that.ruleForm.frontCert,
					  backCert: that.ruleForm.backCert,
					  handCert: that.ruleForm.handCert,
					  operatorsCert: that.ruleForm.operatorsCert,
					  })
				  .then((response) => {
					  if(response.data.code==0){
						  uni.navigateTo({
						  	url: "/pages/user/certificationReviewTian"
						  })
					  }else{
						 this.$store.commit("SET_ERRORINFORMATION", {
						   mes: response.data.msg,
						   icon: "error",
						 }); 
					  }
				  })
				  .catch(() => {});
			},
			close(e){
				let index=e
				let that=this
				if(index==1){
					that.isShow1=false
					that.img1=""
					that.ruleForm.frontCert=""
				}else if(index==2){
					that.isShow2=false
					that.img2=""
					that.ruleForm.backCert=""
				}else if(index==3){
					that.isShow3=false
					that.img3=""
					that.ruleForm.handCert=''
				}else if(index==4){
					that.isShow4=false
					that.img4=''
					that.ruleForm.operatorsCert=""
				}
			},	
			img(file,index){
				let that=this
				let sr=file
				 uniCloud.uploadFile({
				    filePath: sr,
				    cloudPath: 'sr.jpg',
				    success(res) {
						this.imgData=res.fileID
						if(index==1){
							that.ruleForm.frontCert=this.imgData
						}else if(index==2){
							that.ruleForm.backCert=this.imgData
						}else if(index==3){
							that.ruleForm.handCert=this.imgData
						}else if(index==4){
							that.ruleForm.operatorsCert=this.imgData
						}
						console.log(that.ruleForm)
				    },
				    fail(res) {
					},
				    complete() {}
				});
			},
			select(e) {
				let index=e
				let that=this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: function (res) {
						// #ifdef MP-ALIPAY
						let resimg=res.apFilePathsV2[0]
						// #endif 
						// #ifndef MP-ALIPAY
						let resimg=res.tempFilePaths[0]					
						// #endif 
						that.img(resimg,index)
						if(index==1){
							that.isShow1=true
							that.img1=resimg
						}else if(index==2){
							that.isShow2=true
							that.img2=resimg
						}else if(index==3){
							that.isShow3=true
							that.img3=resimg
						}else if(index==4){
							that.isShow4=true
							that.img4=resimg
						}						
				    }
				});
			}
		},
	}
</script>

<style lang="less">
#reviewCert{
	background-color: #fff;
	input{
		width: 100%;
		background: #FFFFFF;		
	}
	.content{
		width: 94%;
		margin: 0 auto;
	}
	.clearfix{
		width: 100%;
		height: 220rpx;
		margin: 20rpx 0 ;
		
	}
	.warring_txt {
	    padding: 18rpx 24rpx;
	    background-color: #ffefe2;
	    color: #f28832;
	    line-height: 30rpx;
	    font-size: 24rpx;
	  }
	.input{
		height: 60rpx;
		border-radius: 0;
		border: none;
		border-bottom: 2rpx solid #e3e3e3;
		padding: 0 16rpx;
		margin: 20rpx 0;
	  }
	.fillInformation_float{
		display: inline-block;
		float: left;
		box-sizing: border-box;
		width: 48%;
		text-align: center;
		background-color: #f5f5f5;
		padding: 20rpx 20rpx 30rpx 20rpx;
		position: relative;
		.close{
			width: 24rpx;
			height: 24rpx;
			text-align: center;
			border-radius: 50%;
			background: #007AFF;
			line-height: 18rpx;
			position: absolute;
			top: 0;
			right: 10rpx;
			font-size: 24rpx;
			z-index: 2;
		}
	  }
	 .img{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	 }
	.fillInformation_float2{
		float: right;
	}
	.fillInformation_img{
	    font-size: 28px;
	    color: #8c939d;
	    width: 100%;
	    height: 100rpx;
	    line-height: 178px;
	    text-align: center;
		background: url('https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E7%94%A8%E6%88%B7/%E7%9B%B8%E6%9C%BA11.png') no-repeat center;
		background-size: 80rpx;
		margin-bottom: 10rpx;
	}
	.cover{
		margin-top: 10rpx;
	}
	.fontT{
		padding: 20rpx;
	}
	.font{
		font-size: 24rpx;
		color: #999999;
	}
	.audio{
		margin-left: 240rpx;
		font-size: 24rpx;
		color: #666666;
	}
	button{
		width: 60%;
		margin: 0 auto;
		margin-bottom: 100rpx;
	}
	.btn{
		text-align: center;
	}
}
</style>
